<template>
  <div class="content">
    <div class="hsgcxDiv">
      <TitleVue :name="'洪水过程线'" />
      <div id="hsgcxChart" ref="hsgcxChart"></div>
    </div>

    <div class="hsfyDiv">
      <TitleVue :name="'洪水防御'" />
      <div class="hsfyContent">
        <div class="row-item" style="cursor: pointer" v-for="item in floodDefense" :key="item.id" @click="changeData(item)">
          <div :class="['row-bed', { active: item.checked }]">
            <img :src="item.icon" alt="" />
          </div>
          <div class="item-colmun">
            <span>{{ item.name }}</span>
            <p>{{ item.count }}个</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import * as echarts from 'echarts'
export default {
  name: 'YyRight',
  components: {
    TitleVue
  },
  data() {
    return {
      myChart: null,
      xAxis: [
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00',
        '11:00',
        '12:00',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
        '24:00'
      ],
      series1: [0.3, 0.5, 0.8, 1.1, 1.5, 1.1, 0.8, 0.6, 0.4, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      series2: [5, 5, 5, 5, 5, 5, 5.38, 5.66, 5.79, 5.89, 5.94, 6.1, 6.22, 6.39, 6.49, 6.56, 6.5, 6.4, 6.3, 6.2, 6.1, 6.02, 5.92, 5.86, 5.8],
      floodDefense: [
        {
          icon: require('@/assets/img/flood/icon-wz.png'),
          name: '物资',
          checked: false,
          count: 2,
          type: 'wz',
          list: [
            {
              name: '物资1',
              position: [112.959044, 37.911409, 1109],
              type: 'wz'
            },
            {
              name: '物资2',
              position: [112.959692, 37.909624, 1095.5],
              type: 'wz'
            }
          ]
        },
        {
          icon: require('@/assets/img/flood/icon-jydw.png'),
          name: '救援队伍',
          checked: false,
          count: 1,
          type: 'jydw',
          list: [
            {
              name: '救援队伍',
              position: [112.952344, 37.904431, 1116.2],
              type: 'jydw'
            }
          ]
        },
        {
          icon: require('@/assets/img/flood/icon-fzc.png'),
          name: '防治村',
          checked: false,
          count: 2,
          type: 'fzc2',
          list: [
            {
              name: '防治村1',
              position: [112.965341, 37.902281, 1074.7],
              type: 'fzc2'
            },
            {
              name: '防治村2',
              position: [112.970367, 37.904304, 1086.3],
              type: 'fzc2'
            }
          ]
        },
        {
          icon: require('@/assets/img/flood/icon-bxd.png'),
          name: '避险点',
          checked: false,
          count: 1,
          type: 'bxd2',
          list: [
            {
              name: '避险点',
              position: [112.95956, 37.899461, 1093.2],
              type: 'bxd2'
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.renderHsgcxChart()
  },
  methods: {
    changeData(item) {
      item.checked = !item.checked
      this.$store.commit('changeMapPoint', {
        list: item.list,
        show: item.checked,
        type: item.type
      })
    },
    renderHsgcxChart() {
      let chartDom = document.getElementById('hsgcxChart')
      if (this.myChart) {
        this.myChart.dispose()
        this.myChart = null
        chartDom.innerHTML = ''
      }
      this.myChart = echarts.init(chartDom, 'macarons')
      let option = {
        grid: {
          left: '10%',
          bottom: '10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765'
            }
          }
        },
        legend: {
          data: ['流量', '降雨量'],
          right: 0,
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: false },
            // prettier-ignore
            data: this.xAxis,
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            name: '流量(m³/s)',
            type: 'value',
            axisLabel: {
              color: '#fff'
            },
            nameTextStyle: {
              color: '#fff'
            }
          },
          {
            name: '降雨量(mm)',
            nameLocation: 'start',
            alignTicks: true,
            type: 'value',
            inverse: true,
            axisLabel: {
              color: '#fff'
            },
            nameTextStyle: {
              color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '降雨量',
            type: 'line',
            lineStyle: {
              shadowColor: '#9aa6ff', //透明的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1, //透明度
              shadowBlur: 8, //阴影大小
              type: 'solid', //实线
              width: 2
            },
            itemStyle: {
              color: '#3740ff'
            },
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: '#3740ff',
            //       color: 'rgba(55, 64, 255, 0.8)'
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(255,255,255,1)'
            //     }
            //   ])
            // },
            emphasis: {
              focus: 'series'
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3
              }
            },
            data: this.series1,
            smooth: true
          },
          {
            name: '流量',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              color: '#45b9d0'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#ffffff'
                },
                {
                  offset: 1,
                  color: 'rgba(69, 185, 208, 0.8)'
                }
              ])
            },
            lineStyle: {
              shadowColor: '#c7f6ff', //透明的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1, //透明度
              shadowBlur: 8, //阴影大小
              type: 'solid', //实线
              width: 2
            },
            emphasis: {
              focus: 'series'
            },
            markArea: {
              silent: true,
              itemStyle: {
                opacity: 0.3
              }
            },
            data: this.series2,
            smooth: true
          }
        ]
      }

      option && this.myChart.setOption(option)
    }
  }
}
</script> 

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .hsgcxDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    #hsgcxChart {
      width: 100%;
      height: 40vh;
      padding: 0 0.8vw 1vh;
      box-sizing: border-box;
    }
  }
  .hsfyDiv {
    // flex: 1;
    width: 100%;
    height: auto;
    padding: 0 5px;
    box-sizing: border-box;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    .hsfyContent {
      box-sizing: border-box;
      margin-bottom: 1vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      padding: 1.5vh 1vw;
      row-gap: 1vh;
      .row-item {
        width: 45%;
        display: flex;
        align-items: center;
        .row-bed {
          position: relative;
          width: 75px;
          height: 65px;
          background: url(@/assets/img/flood/base.png) no-repeat;
          background-size: 100% 100%;
          &.active {
            background: url(@/assets/img/flood/base-active.png) no-repeat;
          }
          &:hover {
            background: url(@/assets/img/flood/base-active.png) no-repeat;
          }
          img {
            position: absolute;
            left: 18%;
            top: 2%;
            display: block;
            height: 50px;
          }
        }

        .item-colmun {
          width: 40%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          span {
            font-size: 14px;
            color: #00ffff;
            margin-bottom: 4px;
          }
          p {
            padding: 0 0.5vh;
            font-family: 'SourceHanSansCN-Normal';
            font-weight: 400;
            font-size: 18px;
            color: #00ffff;
            background: linear-gradient(90deg, rgba(0, 156, 255, 0.5), rgba(0, 156, 255, 0));
          }
        }
      }
    }
  }
}
</style>
